<template>
  <div class="chart-detail-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button :icon="ArrowLeft" @click="handleBack">返回</el-button>
        <h2>{{ pageTitle }}</h2>
      </div>
      <el-button type="primary" :icon="Refresh" :loading="isLoading" @click="handleRefresh">
        刷新
      </el-button>
    </div>

    <!-- 图表内容 -->
    <div class="chart-content">
      <el-card v-loading="isLoading">
        <!-- 谐波图 -->
        <HarmonicChart
          v-if="chartType === 'harmonic' && harmonicData"
          :data="harmonicData"
          :title="chartTitle"
          height="700px"
        />

        <!-- 矢量图 -->
        <VectorChart
          v-else-if="chartType === 'vector' && vectorDataList.length > 0"
          :data="vectorDataList"
          :title="chartTitle"
          height="700px"
        />

        <!-- 波形图 -->
        <WaveChart
          v-else-if="chartType === 'wave' && waveDataList.length > 0"
          :data="waveDataList"
          :title="chartTitle"
          height="700px"
        />

        <!-- 无数据提示 -->
        <!-- <el-empty :image="empty_svg" :image-size="200" description="暂无图表数据" /> -->
      </el-card>
    </div>

    <!-- 错误提示 -->
    <el-alert
      v-if="hasError"
      :title="error"
      type="error"
      show-icon
      :closable="false"
      style="margin-top: 16px"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElCard, ElButton, ElAlert, ElEmpty } from "element-plus";
import { ArrowLeft, Refresh } from "@element-plus/icons-vue";
import { useChartData } from "@/composables/useChartData";
import { HarmonicChart, VectorChart, WaveChart } from "@/components/ChartComponents";
import {
  ChartType,
  type HarmonicDataItem,
  type VectorDataItem,
  type WaveDataItem,
} from "@/api/hmi/chart.api";

defineOptions({
  name: "ChartDetail",
  inheritAttrs: false,
});

const router = useRouter();
const route = useRoute();

// 使用图表数据组合式函数
const {
  isLoading,
  error,
  hasError,
  fetchDataByApiPath,
  getChartDataById,
  getCurrentData,
  parseApiPath,
} = useChartData();

// 本地状态
const chartType = ref<string>("");
const harmonicData = ref<HarmonicDataItem | null>(null);
const vectorDataList = ref<VectorDataItem[]>([]);
const waveDataList = ref<WaveDataItem[]>([]);

// 计算属性
const pageTitle = computed(() => {
  const name = route.query.name as string;
  return name || "图表详情";
});

const chartTitle = computed(() => {
  const name = route.query.name as string;
  return name || "图表";
});

// 获取数据
const loadData = async () => {
  try {
    const apiPath = route.query.api as string;
    const chartId = parseInt(route.params.id as string);

    if (!apiPath) {
      ElMessage.error("缺少API参数");
      return;
    }

    if (!chartId) {
      ElMessage.error("缺少图表ID");
      return;
    }

    // 解析图表类型
    const { type } = parseApiPath(apiPath);
    chartType.value = type;

    // 获取数据
    await fetchDataByApiPath(apiPath);

    // 根据类型处理数据
    if (type === ChartType.HARMONIC) {
      const data = getChartDataById(chartId) as HarmonicDataItem;
      harmonicData.value = data || null;
    } else if (type === ChartType.VECTOR) {
      // 矢量图显示所有数据
      // vectorDataList.value = getCurrentData() as VectorDataItem[];
      const data = getChartDataById(chartId) as VectorDataItem[];
      vectorDataList.value = data || null;
    } else if (type === ChartType.WAVE) {
      // 波形图显示所有数据
      // waveDataList.value = getCurrentData() as WaveDataItem[];
      const data = getChartDataById(chartId) as WaveDataItem[];
      waveDataList.value = data || null;
    }
  } catch (err) {
    console.error("加载图表数据失败:", err);
    ElMessage.error("加载图表数据失败");
  }
};

// 刷新数据
const handleRefresh = async () => {
  await loadData();
  ElMessage.success("刷新成功");
};

// 返回列表
const handleBack = () => {
  router.back();
};

// 组件挂载时加载数据
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.chart-detail-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-left h2 {
  margin: 0;
  color: #303133;
}

.chart-content {
  margin-bottom: 20px;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>
